<template>
  <div class="stagrouptype">
   <div class="showAll" v-if="!showDetail">
    <div class="toolbar">
      <el-radio-group v-model="kindCode" @change="getGroupTree">
        <el-radio label="bu">BU</el-radio>
        <el-radio label="dept">部门</el-radio>
      </el-radio-group>
      <el-cascader
        v-model="groupTypeId"
        clearable
        :options="options"
        size="small"
        :props="{ expandTrigger: 'hover', value: 'id', label: 'kindName' }"
        @change="handleChange"
        style="margin-left: 20px"
      >
      </el-cascader>
    </div>
    <div class="content">
      <el-table
        border
        stripe
        size="small"
        :highlight-current-row="true"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="kindName" label="类型名称"></el-table-column>
        <el-table-column prop="kindCode" label="部门/BU">
          <template slot-scope="scope">
            <span>{{ scope.row.kindCode == "dept" ? "部门" : "BU" }}</span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="操作"
            :width="90"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button @click="showInfo(scope.row)" size="mini" type="primary">
                <i class="el-icon-info"></i>
              </el-button>
            </template>
          </el-table-column>
      </el-table>
    </div>
    <el-dialog title="选择查看详情的群组" :visible.sync="showGroup">
        <el-form size="mini">
            <el-form-item label="群组">
          <el-select v-model="group" filterable
          @change="groupChange">
            <el-option
              v-for="(item, index) in workGroupList"
              :key="index"
              :label="item.groupName"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
            <el-form-item class="diaBtn">
                <el-button type="primary" @click="showSta">确定</el-button>
                <el-button @click="showGroup = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
   </div>
   <div class="showDetail" v-if="showDetail">
      <div class="toolBar">
        <el-button @click="showDetail = false" size="small" type="info"
          ><i class="el-icon-arrow-left"></i> 返 回</el-button
        >
      </div>
      <div class="content">
        <el-table
          border
          stripe
          size="small"
          :highlight-current-row="true"
          :data="workList"
          style="width: 100%"
        >
          <el-table-column
            prop="username"
            label="姓名"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="workTime"
            label="工时"
            :key="Math.random()"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from "@/js/workTimeApi.js";
export default {
  name: "stagrouptype",
  data() {
    return {
      groupTypeId: null,
      options: [],
      kindCode: "",
      typeId: null,
      tableData: [],
      showGroup: false,
      group:'',
      workGroupList: [],
      workList: [],
      showDetail: false,
    };
  },
  methods: {
    handleChange(value) {
      this.typeId=value[value.length-1]
      this.getStaData()
    },
    getGroupTree() {
      api.getGroupKindTree({ kindCode: this.kindCode }).then((res) => {
        this.options = res.data;
      });
    },
    getStaData() {
      api.staByGroupType({groupTypeId:this.typeId}).then((res) => {
        this.tableData = res.data;
      });
    },
    showInfo(data){
      this.group=''
      this.workGroupList=[]
      this.workList=[]
      this.workGroupList=data.workGroupList
      this.showGroup=true
    },
    showSta(){
      if(this.group===''){
        this.$message({
          type: 'warning',
          message: '请选择群组'
        })
      }
      else{
      this.getStaData()
      this.showGroup=false
      this.showDetail=true
      }
    },
    groupChange(value){
      this.workList=this.workGroupList[value].workList
    }
  },
  mounted() {
    this.getStaData();
  },
};
</script>
<style lang="scss" scoped>
.stagrouptype {
  padding-top: 20px;
}
.toolBar {
  display: flex;
}
.content {
  margin-top: 10px;
}
.diaBtn {
  display: flex;
  justify-content: center;
}
.pagination {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
</style>